<template>
  <div id="index">
      <el-row>
        <el-col :span="24" class="topbar">
          <div class="action">
            <el-breadcrumb separator="|" v-if="status">
              <el-breadcrumb-item>欢迎您:</el-breadcrumb-item>   
              <el-breadcrumb-item ><span @click="logout">退出</span></el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb separator="|" v-else>
              <el-breadcrumb-item><router-link to="/register">注册</router-link></el-breadcrumb-item>
              <el-breadcrumb-item><router-link to="/login">登录</router-link></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="20" class="header flex">
          <div class="logo">
            <img src="../assets/images/logo.jpg" height="44" width="408">
          </div>
          <div class="search_input">
            <el-input></el-input>
          </div>
        </el-col>
      </el-row>
      <div class="nav">
          <div class="nav_sch">
            <div class="header">全部学校<i class="el-icon-arrow-down"></i></div>
            <div class="con">
              <ul>
                <li>浙江工商大学</li>
                <li>浙江工商大学</li>
                <li>浙江工商大学</li>
                <li>浙江工商大学</li>
              </ul>
            </div>
          </div>
          <div class="nav_list">
            <el-menu :default-active="1" class="el-menu-demo" mode="horizontal" >
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item index="3">订单管理</el-menu-item>
            </el-menu>
          </div>
          <el-carousel height="380px">
            <el-carousel-item v-for="item in pictures" :key="item">
              <img :src="item" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
      </div>
      <el-row type="flex" justify="center" class="row" :gutter="20">
        <el-col :span="15" >
          <el-card class="box-card leftDiv"></el-card>
          <el-card class="box-card leftDiv"></el-card>
          <el-card class="box-card leftDiv"></el-card>
        </el-col>
        <el-col :span="5" class="">
          <el-card class="box-card rightDiv"></el-card>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="row" :gutter="20">
        <el-col :span="20">
          <img src="../assets/images/demo6.jpg" width="100%">
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="bgcolor" :gutter="20">
        <el-col :span="20" class="flex">
          <div class="notice">
            <div class="common_header flex">
              <span>通知公告</span>
              <span class="color">MORE<i class="el-icon-d-arrow-right"></i></span>
            </div>
            <div class="con"></div>
          </div>
          <div class="notice">
            <div class="common_header flex">
              <span>通知公告</span>
              <span class="color">MORE<i class="el-icon-d-arrow-right"></i></span>
            </div>
            <div class="con"></div>
          </div>
          <div class="morediv">
            <div class="common_header flex">
              <span>通知公告</span>
              <span>MORE <i class="el-icon-d-arrow-right"></i></span>
            </div>
            <div class="con">
              <ul>
                <li><i class="el-icon-caret-right"></i>浙江工商大学</li>
                <li><i class="el-icon-caret-right"></i>浙江工商大学</li>
                <li><i class="el-icon-caret-right"></i>浙江工商大学</li>
                <li><i class="el-icon-caret-right"></i>浙江工商大学</li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="footer">
        <el-col :span="20" class="">
          <h3>友情链接</h3>
          <div class="link">
            <p>
              <a href="http://www.univs.cn/" target="_blank">大学生在线</a>
              <a href="http://www.youthol.cn/" target="_blank">青春在线</a>
              <a href="http://www.hustonline.net/" target="_blank">华中大在线</a>
              <a href="http://www.ziqiang.net/" target="_blank">武大自强学堂网</a>
              <a href="http://campus.gdufs.edu.cn/" target="_blank">广外地带网</a>
              <a href="http://www.wutnews.net/" target="_blank">武汉理工经纬网</a>
              <a href="http://www.hzu.net.cn/" target="_blank">华大桂声</a>
              <a href="http://stu.fudan.edu.cn/v7/" target="_blank">复旦学生网</a>
            </p>
            <p>
              <a href="http://www.scuec.edu.cn/" target="_blank">中南民族大学官方网站</a>
              <a href="http://news.scuec.edu.cn/xww/" target="_blank">新闻网</a>
              <a href="http://www1.scuec.edu.cn/tuanwei/" target="_blank">青年网</a>
              <a href="http://nhszw.scuec.edu.cn/" target="_blank">南湖思政网</a>
              <a href="http://video.scuec.edu.cn/" target="_blank">电视台</a>
              <a href="http://online.scuec.edu.cn/gbt/" target="_blank">广播台</a>
              <a href="http://bbs.scuec.edu.cn/" target="_blank">民大论坛</a>
              <a href="http://online.scuec.edu.cn/xzw/" target="_blank">学子网</a>
            </p>
          </div>
          <div class="copyright">
            ©2011-2018 stuzone.com 版权所有 鄂ICP备05003346号 Powered By&nbsp; <a href="http://www.stuzone.com/bitworkshop-beta/">比特工场</a>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      status:false,
      pictures:[
      'http://www.hzic.edu.cn/upload/20115249314569047.jpg',
      'http://www.hzic.edu.cn/upload/200991514522284234.jpg',
      'http://www.hzic.edu.cn/upload/20095132345534874.jpg'
      ]
    }

  },
  methods:{
      gotoLogin(){
        this.$router.push("/login");
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#index{
  .flex{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  .header{
    //width: 1000px;
    height: 150px;
    //margin: 0 auto;
    .search_input{
      margin-right:20px;
    }
  }
  .topbar{
    background: #efefef;
    height:40px;
    display:flex;
    align-items: center;
    justify-content: flex-end;
    .action{
      margin-right:20px;
      a,span{
        cursor: pointer;
        text-decoration:none;
      }
    }
  }
  .el-main{
    padding:0px;
  }
  .footer{
    height:150px;
    text-align:center;
    background:#393D49;
    padding:20px;
    h3{
      text-align:left;
      color:#fff;
    }
    a{
      color:#fff;
    }
    .link{
      color:#fff;
      width:75%;
      padding:10px 0;
      margin:0 auto;
      border-bottom:1px solid #4b4b4b
    }
    .copyright{
      color:#fff;
      padding:10px 0;
    }
  }
  .logo{
    //width:500px;
  }
  .search_input{
    width:300px;
    float:right;
  }
  //导航
  .nav{
    position:relative;
    //height:440px;
    .nav_sch{
      position:absolute;
      height:442px;
      width:210px;
      z-index:9;
      left:100px;
      background: rgba(48, 49, 51, 0.51);
      .header{
        height:60px;
        line-height:60px;
        color:#fff;
        font-size:20px;
        background:#409EFF;
        border-bottom: 2px solid #409eff;
      }
      .con{
        ul{
          width: 100%;
          padding: 1rem 0;
          height: 100%;
        }
        li{
          width: 50%;
          color:#fff;
          float: left;
          text-align: center;
          padding: .6rem 0;
          list-style-type: none;
        }
      }
    }
    .nav_list{
      height:60px;
      border-bottom: 2px solid #409eff;
    }
  }
  .el-menu{
    float: right;
    margin-right: 30%;
  }
  .el-menu--horizontal{
    border-bottom:0;
  }
  .el-menu--horizontal .el-submenu .el-submenu__icon-arrow{
    margin-left:0px;
  }
  .el-submenu__title i{
    color:#fff;
  }
  .el-menu--horizontal .el-submenu>.el-menu{
    background-color: rgba(48, 49, 51, 0.59);
  }
  .el-menu--horizontal .el-submenu .el-menu-item{
    background-color: transparent;
    color:#fff;
  }
  //公告
  .bgcolor{
    background:#f4f4f4;
    padding:20px 0;
  }
  .row{
    margin:20px;
  }
  .common_header{
    height:40px;
    line-height:40px;
    padding:0 20px;
    border-bottom:1px solid #ddd;
    font-size:16px;
    font-weight:500;
    .color{
      color:#409efe;
    }
  }
  .notice{
    height:400px;
    width:31%;
    border:1px solid #ddd;
    background:#fff;
  }
  .morediv{
    height:400px;
    width:31%;
    border:1px solid #ddd;
    background:#fff;
  }
  .con{
    text-align:left;
    ul{
      padding:15px 25px;
    }
    li{
      height:30px;
      line-height:30px;
    }
  }

  //幻灯片后第二个el-row内容
  .leftDiv{
    height:31%;
    margin-bottom:10px;
  }
  .rightDiv{
    height:500px;
  }
  
}
</style>
